<template>
	<view class="l_pages" :style="skin">
		<jnavbar title="赠送记录"></jnavbar>
		<view class="page_container">
			<view class="uni-block-bar uni-view uni-flex-row uni-underline">
				<view :class="[tabIndex == 0 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="0" @click="tapTab"><text>余额</text></view>
				<view :class="[tabIndex == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="1" @click="tapTab"><text>积分</text></view>
			</view>
			<scroll-view scroll-y class="scroll_div" @scrolltolower="getlist">
				<view class="uni-block-list">
					<view class="empty_div" v-if="hasShow == 'none'"><u-empty text="暂无数据" mode="list"></u-empty></view>
					<view class="list uni-flex-column" v-else-if="hasShow == 'list'">
						<view class="u-flex u-row-between item" v-for="(item, index) in list" :key="index">
							<view class="u-flex">
								<view class="img-box"><vimage imgstyle="width:100rpx;height:100rpx;border-radius: 50%;" :src="item.gifted_user.picurl"></vimage></view>
								<view class="u-flex u-flex-col u-col-top u-m-l-20">
									<text class="u-m-b-20">{{ item.gifted_user.nickname }}</text>
									<text>{{ item.gifted_user.id }}</text>
								</view>
							</view>
							<view class="u-flex u-flex-col u-col-bottom">
								<text class="u-m-b-20">{{ item.type == 0 ? '余额：' : '积分：' }}{{ item.gifted_money }}</text>
								<text>{{item.create_time}}</text>
							</view>
						</view>
						
						<!-- <u-cell-group>
							<u-cell-item hover-class="cell-hover-class" :arrow="false" v-for="(item, index) in list" :key="index">
								<text slot="title">申请金额:￥{{ item.withdraw }}</text>
								<text slot="label">申请时间:{{ item.create_time }}</text>
								<text slot="right-icon">{{ item.status_text }}</text>
							</u-cell-item>
						</u-cell-group> -->
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import http from '@/common/http.js';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			tabIndex: 0,
			hasShow: 'list',
			page: 1,
			size: 10,
			list: [],
			sum: 0,
			time: 0
		};
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	async onLoad(params) {
		await this.$getWx;
		if (params.tab) {
			this.tabIndex = params.type;
		}
		this.getassettransferList();
	},
	onShow() {
		// this.getagentList();
	},
	onReachBottom() {
		this.getassettransferList();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getassettransferList();
	},

	methods: {
		getlist() {
			this.getassettransferList();
		},
		logincallback(e) {
			if (e.islogin) {
				this.getassettransferList();
			}
		},
		tapTab(e) {
			this.tabIndex = e.currentTarget.dataset.id;
			this.page = 1;
			this.list = [];
			this.getassettransferList();
		},
		getassettransferList() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const _this = this;
			const param = {
				page: this.page,
				size: this.size
			};
			param.type = this.tabIndex;

			// /index/assettransfer/list?page=1&size=10
			http('/assettransfer/list', param, 'GET').then(
				res => {
					const json = res.data.msg;
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (json.data.length > 0) {
						_this.hasShow = 'list';
						this.page += 1;

						this.list = this.list.concat(json.data);
					} else {
						if (this.page == 1) {
							_this.hasShow = 'none';
						} else {
							uni.showToast({
								title: '没有更多数据了',
								icon: 'none'
							});
						}
					}
				},
				e => {
					uni.showModal({
						title: '提示',
						content: e,
						showCancel: false
					});
					uni.hideLoading();
				}
			);
		}
	}
};
</script>

<style lang="scss">
.page_container {
	position: relative;
	.scroll_div {
		height: calc(100% - 80rpx);
	}
}
.empty_div {
	height: 500rpx;
}
.uni-block-bar {
	justify-content: space-between;
	height: 80rpx;
	z-index: 100;
	width: 750rpx;
	.item {
		line-height: 78rpx;
		flex: 1;
		color: #696969;

		text {
			display: inline-block;
		}
	}

	.active {
		color: var(--main-color);
		border-bottom: 2rpx solid var(--main-color);
	}
}

.uni-block-list {
	.order {
		padding-top: 240rpx;
		align-items: center;

		image {
			width: 50%;
			height: 300rpx;
			margin-bottom: 100rpx;
		}

		text {
			color: #a9a9a9;
			font-size: 26rpx;
		}
	}

	.list {
		.item {
			width: 710rpx;
			margin-left: 20rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			.head {
				padding: 0 0 20rpx 0;
			}

			.body {
				padding: 20rpx 0;

				image {
					width: 130rpx;
					height: 130rpx;
					margin-right: 36rpx;
					border-radius: 6rpx;
				}

				.detail {
					flex: 1;
					justify-content: space-between;
					height: 130rpx;
					.title {
						line-height: 1;
						justify-content: space-between;
						font-size: 36rpx;
						.name {
							box-sizing: border-box;
							text-overflow: ellipsis;
							overflow: hidden;
							display: inline-block;
							width: 440rpx;
							white-space: nowrap;
						}
					}
					.skuvalue {
						color: #333;
					}
					.price {
						text:first-child {
							color: #ff3c29;
						}
					}
				}
			}

			.bottom {
				padding: 10rpx 0;
				// border-top: 1rpx solid #e7e7e7;

				.left {
					width: 100%;
					justify-content: flex-end;
					.price {
						font-weight: bold;
						margin-right: 16rpx;
					}
				}

				.right {
					width: 100%;
					justify-content: flex-end;

					.number {
						font-weight: bold;
					}

					.price {
						font-weight: bold;
					}
				}
			}

			.button {
				justify-content: flex-end;

				text {
					display: inline-block;
					text-align: center;
					font-size: 24rpx;
					line-height: 50rpx;
					// padding: 12rpx 0;

					width: 150rpx;

					border-radius: 30rpx;
					height: 50rpx;
				}

				/*cancel：取消*/
				.pay {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.finish {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.success {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.cancel {
					border: 1px solid #878787;
				}

				.refund {
					border: 1px solid #878787;
				}

				.del {
					border: 1px solid #878787;
				}

				.state {
					color: #b00606;
					width: 210rpx;
					text-align: right;
				}
			}
		}
	}
}
</style>
